<template>
  <header>
    <div class="logo-wrap">
      <router-link to="/"><img class="logo" :src="require('@/assets/img/megmeet-logo.png')" /></router-link>
    </div>
  </header>
  <div>
    <el-row>
      <el-button type="primary" :icon="ArrowLeft" size="small" class="back-button" @click="backPrevious">返回</el-button>
    </el-row>
  </div>
  <div class="personal-data-wrap">
    <div class="head">个人资料</div>
    <div class="avatar-title">头像</div>
    <div class="avatar-block">
      <el-avatar :src="userform.avatar" />
    </div>
    <el-row>
      <el-col  :span="2">
        <el-upload
                ref="upload"
                class="upload-demo"
                :action="action"
                :auto-upload="true"
                :limit="1"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
                :data="{userId:userform.userId}"
                :headers="uploadHeaders"
        >
          <template #trigger>
            <el-button  type="primary" :icon="Edit">{{text}}</el-button>
          </template>
        </el-upload>
      </el-col>
    </el-row>

    <el-form>
      <el-form-item prop="jobNo" label="工号" >
        <el-input v-model="userform.userName" placeholder="请输入工号" maxlength="100" readonly/>
      </el-form-item>
      <el-form-item prop="username" label="姓名">
        <el-input v-model="userform.nickName" placeholder="请输入姓名" maxlength="100" readonly />
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'
import FrontApi from '@/api/front'
import {genFileId} from "element-plus";
import {Edit,ArrowLeft} from '@element-plus/icons-vue'
import {getToken} from "@/utils/auth";
import router from '@/router/index'
export default {

  setup() {
    const text = ref('更改头像');
    const action = ref('/api/admin/front/updatePersonalAvatar');
    var data = reactive({
      userform: {
        avatar:''
      }
    });
    const upload = ref()
    const backPrevious = () =>{
      router.back()
    }
    const handleExceed = (files) => {
      upload.value.clearFiles()
      const file = files[0]
      file.uid = genFileId()
      upload.value.handleStart(file)
    }

    const uploadHeaders = reactive({
      Authorization: 'Bearer ' + getToken()
    })

    const submitUpload = () => {
      upload.value.submit()
    }
    const handleSuccess = (res) =>{
      upload.value.clearFiles();//上传成功之后清除历史记录
      data.userform.avatar = res.data.avatar
    }
    FrontApi.getPersonData().then(res => {
      data.userform = res.data
    })


    return {
      ...toRefs(data),
      text,
      action,
      upload,
      uploadHeaders,
      handleExceed,
      submitUpload,
      handleSuccess,
      Edit,
      ArrowLeft,
      backPrevious
    }
  },
  methods:{

  }
};
</script>
<style scoped>
header {
  margin: 0 3.5rem 0 17.3rem;
  height: 60px;
}
.logo-wrap {
  height: 100%;
  display: flex;
  align-items: center;
}
.personal-data-wrap {
  margin: 5rem 20rem auto 20rem;
}
.head {
  font-weight: 400;
  color: #303133;
  font-size: 2rem;
  margin-bottom: 2.4rem;
}
.avatar-title {
  font-weight: 400;
  color: #303133;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.avatar-block {
  width: 14.4rem;
  height: 14.4rem;
  margin-bottom: 3rem;
}
.el-avatar {
  width: 100%;
  height: 100%;
}
.edit-avatar {
  color: #00A298;
  border-color: #00A298;
  width: 10.8rem;
  height: 3.23rem;
  font-size: 1.4rem;
}
.edit-avatar:hover {
  background-color: #00a29812;
}
.el-form {
  margin: 4.9rem auto 4.2rem 0;
  width: 50rem;
}
:deep(.el-form-item__label) {
  font-size: 1.4rem;
}
:deep(.el-input__inner) {
  font-size: 1.4rem;
}
.submit {
  background-color: #00A298;
  border-color: #00A298;
  width: 6rem;
  height: 3.2rem;
  font-size: 1.4rem;
}
.back-button{
  background-color: white;
  border-color: #00A298;
  left: 9%;
  position: absolute;
  color: #00A298;
}
.el-button--primary {
  --el-button-bg-color:#00A298;
  --el-button-border-color:#00A298;
}
/*.el-button:hover {*/
/*  color: #f3f7fa !important;*/
/*  border-color: #1A9B92;*/
/*  background-color: #f0f4f3;*/
/*}*/
</style>
